<template>
  <ElCard :style="{ 'margin-top': props.marginTop }">
    <template #header>
      <div class="card-header">
        <div class="left">
          <div class="icon">&nbsp;</div>
          <div class="title">主要保护物种</div>
        </div>
        <div class="right"><ElButton type="primary" @click="onSaveClicked">保存</ElButton></div>
      </div>
    </template>
    <ElForm :model="form" :rules="rules" ref="formRef" status-icon>
      <el-row>
        <el-col :span="6">
          <ElFormItem label="物种" :label-width="labelWidth" prop="speciesOneId">
            <el-select v-model="form.speciesOneId" :clearable="true" :fit-input-width="true">
              <el-option
                v-for="item in animalPlantList"
                :key="'speciesOneId' + item?.id"
                :label="item?.chName"
                :value="item ? item.id : 0" />
            </el-select>
          </ElFormItem>
        </el-col>
        <el-col :span="6">
          <ElFormItem label="面积" :label-width="labelWidth" prop="speciesOneArea">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.speciesOneArea" controls-position="right" clearable />
              <div class="define-append">公顷</div>
            </div>
          </ElFormItem>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <ElFormItem label="物种" :label-width="labelWidth" prop="speciesTwoId">
            <el-select v-model="form.speciesTwoId" :clearable="true" :fit-input-width="true">
              <el-option
                v-for="item in animalPlantList"
                :key="'speciesTwoId' + item?.id"
                :label="item?.chName"
                :value="item ? item.id : 0" />
            </el-select>
          </ElFormItem>
        </el-col>
        <el-col :span="6">
          <ElFormItem label="面积" :label-width="labelWidth" prop="speciesTwoArea">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.speciesTwoArea" controls-position="right" clearable />
              <div class="define-append">公顷</div>
            </div>
          </ElFormItem>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <ElFormItem label="物种" :label-width="labelWidth" prop="speciesThreeId">
            <el-select v-model="form.speciesThreeId" :clearable="true" :fit-input-width="true">
              <el-option
                v-for="item in animalPlantList"
                :key="'speciesThreeId' + item?.id"
                :label="item?.chName"
                :value="item ? item.id : 0" />
            </el-select>
          </ElFormItem>
        </el-col>
        <el-col :span="6">
          <ElFormItem label="面积" :label-width="labelWidth" prop="speciesThreeArea">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.speciesThreeArea" controls-position="right" clearable />
              <div class="define-append">公顷</div>
            </div>
          </ElFormItem>
        </el-col>
      </el-row>
    </ElForm>
  </ElCard>
</template>

<script setup lang="ts" name="ZLSummarizeData">
import { reactive, ref, watch, unref, onMounted } from 'vue'
import { ElForm, ElFormItem, FormRules, FormInstance } from 'element-plus'
import { TbySummarizeData, saveOrUpdateSummarizeDataSpecies } from '@api/tby/summarize/data/summarizeData'
import { ElMessage } from 'element-plus'
import { AnimalPlant } from '@api/tby/summarize/animalPlant/interface'
import { listUseOverview } from '@api/tby/summarize/animalPlant'
import { validateDecimalTwoInteger } from '@api/tby/common/common'

const labelWidth = 100
const form = ref<Partial<TbySummarizeData.Form>>({})
const animalPlantList = ref<Partial<AnimalPlant.Record[]>>([])
interface FormParamProps {
  id?: number
  formDetail: Partial<TbySummarizeData.Form>
  marginTop: string
}

const props = withDefaults(defineProps<FormParamProps>(), {
  marginTop: '0px'
})

watch(
  () => props.formDetail,
  (n: Partial<TbySummarizeData.Form>) => {
    form.value.speciesOneId = n.speciesOneId
    form.value.speciesOneArea = n.speciesOneArea
    form.value.speciesTwoId = n.speciesTwoId
    form.value.speciesTwoArea = n.speciesTwoArea
    form.value.speciesThreeId = n.speciesThreeId
    form.value.speciesThreeArea = n.speciesThreeArea
  }
)

watch(
  () => props.id,
  (n?: number) => {
    if (n) {
      form.value.id = n
    } else {
      form.value.id = undefined
    }
  }
)

/**面积表单 */
const formRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  speciesOneId: [{ required: true, message: '请选择物种', trigger: 'blur' }],
  speciesOneArea: [
    { required: true, message: '请输入物种面积', trigger: 'blur' },
    { validator: validateDecimalTwoInteger, trigger: 'blur' }
  ],
  speciesTwoId: [{ required: true, message: '请选择物种', trigger: 'blur' }],
  speciesTwoArea: [
    { required: true, message: '请输入物种面积', trigger: 'blur' },
    { validator: validateDecimalTwoInteger, trigger: 'blur' }
  ],
  speciesThreeId: [{ required: true, message: '请选择物种', trigger: 'blur' }],
  speciesThreeArea: [
    { required: true, message: '请输入物种面积', trigger: 'blur' },
    { validator: validateDecimalTwoInteger, trigger: 'blur' }
  ]
})

const emit = defineEmits(['success'])

const onSaveClicked = () => {
  if (!formRef.value) return
  formRef.value?.validate(valid => {
    if (!valid) {
      return
    }
    const formData = { ...unref(form) }
    if (formData.speciesOneId == formData.speciesThreeId) {
      ElMessage({
        type: 'error',
        message: '请勿选择重复的物种'
      })
      return
    } else if (formData.speciesOneId == formData.speciesTwoId) {
      ElMessage({
        type: 'error',
        message: '请勿选择重复的物种'
      })
      return
    } else if (formData.speciesTwoId == formData.speciesThreeId) {
      ElMessage({
        type: 'error',
        message: '请勿选择重复的物种'
      })
      return
    }
    saveOrUpdateSummarizeDataSpecies(formData).then(response => {
      if (response.code != 0) {
        ElMessage({
          type: 'error',
          message: response.msg
        })
        return
      }
      ElMessage({
        type: 'success',
        message: '保存成功'
      })
      let data: TbySummarizeData.Form = response.data as TbySummarizeData.Form
      emit('success', data.id)
    })
  })
}

onMounted(async () => {
  console.log('进来了')
  listUseOverview().then(({ data }) => {
    animalPlantList.value = data
  })
})
</script>

<style scoped lang="scss">
.card-header {
  height: 25px;
  line-height: 25px;
  .left {
    float: left;
    .icon {
      width: 5px;
      background-color: #104cf0;
      float: left;
    }
    .title {
      float: left;
      margin-left: 5px;
      font-weight: bold;
    }
  }
  .right {
    float: right;
  }
}
.mo-input--number {
  border: 1px solid #dcdfe6;
  display: flex;
  border-radius: 4px;
  .el-input-number--mini {
    flex: 1;
  }
  ::v-deep .el-input__inner {
    border: none !important;
  }
}
.define-append {
  width: 40px;
  display: inline-block;
  background: #f5f7fa;
  padding: 0px 3px;
  border-left: none;
  height: 32px;
  line-height: 32px;
  color: #909399;
  font-size: 12px;
  text-align: center;
}
</style>
